<template>
  <div id="videos">
       <video-player
           class="video-player-box" 
           ref="videoPlayer"
           :options="playerOptions"
       >
       </video-player>
  </div>
</template>

<script>
import {videoPlayer} from 'vue-video-player'
export default {
  components:{
    videoPlayer
  },
  name: 'videos',
  props:['videos','index'],
  data(){
    return{
      state:true,
      playerOptions:{
        controls :false,//控制条
        preload:true,//预加载
        fluid:true,//高度自适应
        muted:false,//静音
        loop:true,//循环播放
        sources:[{//资源
          type:'video/mp4',
          src:'http://127.0.0.1:8181/'+this.videos.src
        }],
        poster:require('../../../assets/img/mm.jpg')
      }
    }
  },
  computed:{
    player(){
     return this.$refs.videoPlayer.player
    }
  },
  methods:{
    judge(){
      // console.log(this.videos)
      if(this.state === false){
        //播放
        this.$refs.videoPlayer.player.play();
        this.state = true
      }else{
        //暂停
        this.$refs.videoPlayer.player.pause()
        this.state = false
      }
    },
    play(){
      this.$refs.videoPlayer.player.load();//重新加载
      this.$refs.videoPlayer.player.play();//播放
    },
    pause(){
      this.$refs.videoPlayer.player.pause();//暂停
    },
    autoplay(){
      if(this.index === 0){//第一条视频自动播放
        this.playerOptions.autoplay = "muted" //添加自动播放属性
      }
    }
    
    
  },
  created() {//数据加载完成但还没有加载页面
    this.autoplay()
  }
  
};
</script>

<style scoped>
#videos{
  height: 100%;
}
.video-player-box{
  height: 100%;
  display: flex;
  margin: 0 auto;
  overflow: hidden;
  align-items: center;
}
</style>
